<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录成功 - 量子科技</title>
    <style>
        :root {
            --primary-color: #00a8ff;
            --dark-bg: #0f1621;
            --card-bg: #1a2233;
            --text-light: #e0e6f0;
            --accent-color: #00f7ff;
            --success-color: #52c41a;
        }

        body {
            background-color: var(--dark-bg);
            font-family: 'Segoe UI', Arial, sans-serif;
            color: var(--text-light);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image:
                radial-gradient(circle at 20% 30%, rgba(82, 196, 26, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(82, 196, 26, 0.1) 0%, transparent 20%);
            overflow: hidden;
        }

        .success-container {
            background-color: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            width: 400px;
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .success-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--success-color);
        }

        .success-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 25px;
            position: relative;
        }

        .success-icon .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid var(--success-color);
            animation: circle-rotate 3s linear infinite;
        }

        .success-icon .circle:nth-child(2) {
            animation-delay: -1s;
        }

        .success-icon .circle:nth-child(3) {
            animation-delay: -2s;
        }

        .success-icon .check {
            position: relative;
            z-index: 2;
            color: var(--success-color);
        }

        .success-content h2 {
            font-size: 24px;
            margin-bottom: 15px;
            color: var(--success-color);
        }

        .success-content p {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 25px;
            opacity: 0.8;
        }

        .user-info {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            padding: 12px;
            background-color: rgba(82, 196, 26, 0.1);
            border-radius: 6px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .user-details {
            text-align: left;
        }

        .user-name {
            font-weight: 500;
            margin-bottom: 2px;
        }

        .user-email {
            font-size: 12px;
            opacity: 0.7;
        }

        .continue-btn {
            padding: 12px 30px;
            background-color: var(--success-color);
            border: none;
            border-radius: 6px;
            color: white;
            font-weight: 500;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .continue-btn:hover {
            background-color: #73d13d;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(82, 196, 26, 0.3);
        }

        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .particle {
            position: absolute;
            background-color: rgba(82, 196, 26, 0.3);
            border-radius: 50%;
            animation: float 10s infinite linear;
        }

        @keyframes circle-rotate {
            0% {
                transform: rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes float {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(10px, 10px);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            margin-top: 25px;
            border-radius: 2px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--success-color), var(--accent-color));
            animation: progress 5s linear forwards;
        }

        @keyframes progress {
            to {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>

    <div class="success-container">
        <div class="success-icon">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="check">
                <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
            </div>
        </div>

        <div class="success-content">
            <h2>登录成功</h2>
            <p>欢迎回到量子科技平台，正在为您跳转至控制面板...</p>

            <div class="user-info">
                <div class="user-avatar">JD</div>
                <div class="user-details">
                    <div class="user-name">John Doe</div>
                    <div class="user-email">john.doe@quantumtech.com</div>
                </div>
            </div>

            <button class="continue-btn" onclick="window.location.href='dashboard.html'">立即进入</button>

            <div class="progress-bar">
                <div class="progress"></div>
            </div>
        </div>
    </div>

    <script>
        // 创建粒子效果
        const particlesContainer = document.getElementById('particles');
        const particleCount = 20;

        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');

            const size = Math.random() * 6 + 2;
            const posX = Math.random() * 100;
            const posY = Math.random() * 100;
            const delay = Math.random() * 5;
            const duration = Math.random() * 10 + 10;

            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.left = `${posX}%`;
            particle.style.top = `${posY}%`;
            particle.style.opacity = Math.random() * 0.5 + 0.1;
            particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
            particle.style.animationDirection = Math.random() > 0.5 ? 'normal' : 'reverse';

            particlesContainer.appendChild(particle);
        }

        // 自动跳转
        setTimeout(function() {
            window.location.href = 'http://127.0.0.1:5000/dashboard';
        }, 5000);
    </script>
</body>
</html>